<template>
  <div class="CustomerManage">
      <div class="search">
        <el-form :inline="true" :model="search" class="demo-form-inline">
          <el-form-item label="输入搜索">
            <el-input v-model="search.key" placeholder="请输入设备名称"></el-input>
          </el-form-item>
          <el-form-item label="输入时间">
            <el-date-picker
              v-model="search.time"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="chage"
            ></el-date-picker>
          </el-form-item>
          <el-form-item><el-button type="primary" @click="onsubmit">查询</el-button></el-form-item>
        </el-form>
        <el-button class="ebtn" type="warning" @click="GotoPg(null,null)">新增客户</el-button>
      </div>
      <el-table :data="ListData" stripe style="margin: 10px 20px;width: calc( 100% - 40px)" :height="autoHeightTable" show-overflow-tooltip>
        <el-table-column prop="xuhao" type="index" label="序号" width="100" align="center"></el-table-column>
        <el-table-column prop="number" label="编号"  align="center"></el-table-column>
        <el-table-column prop="name" label="客户名称"  align="center"></el-table-column>
        <el-table-column prop="lianxiren" label="联系人" align="center"></el-table-column>
        <el-table-column prop="phone" label="联系方式"  align="center"></el-table-column>
        <!--<el-table-column prop="expriedebt" label="到期欠款(元)" align="center"></el-table-column>
        <el-table-column prop="unexpriedebt" label="未到期欠款(元)" align="center"></el-table-column>
        <el-table-column prop="totalexpriedebt" label="欠款总额(元)" align="center"></el-table-column>-->
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="warning" @click="GotoPg(scope.row.Id,null)">编辑</el-button>
            <el-button type="primary" size="small" @click="GotoPg(scope.row.Id,1)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
        :total="total">
      </el-pagination>
    <!--<div class="nav">
      <hy-search
        class="search_box"
        ref="query"
        :searchTitle="searchTitle"
        v-model="searcher"
        :button="{btnShowBy3:true}"
        :buttonText="{btnNameBy3:'新增客户'}"
        :col="6"
        @search="getlist(0)"
        @clickbybtn3="addcutomer()"
      ></hy-search>
    </div>
    -->
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      search:{ key: "",start:"",end:"" },
      ListData:[],
      total: 1,
      current: 1,
      pagesize: 10,
    };
  },
  computed: {
    autoHeightTable() {
      return document.documentElement.scrollHeight - 251 - 78;
    }
  },
  created() {
    this.LoadCount()
    this.LoadContents()
    // this.getlist(0);
  },
  methods: {
    handleCurrentChange(e) {
      this.current=e;
      this.LoadContents();
    },
    LoadCount(){
      let jsondata={
        pn:0,
        PerPageSize:0,
        key: this.search.key,
        start: this.search.start,
        end: this.search.end,
      }
      let jsondata_str=JSON.stringify(jsondata)
      axios("/apis/ScProductManage.asmx/LoadCount?index=" + 1 + "&jsondata=" + jsondata_str).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var result = JSON.parse(datas.int.__text);
        this.total =result;
      });
    },
    LoadContents(){
      let jsondata={
        pn:this.current-1,
        PerPageSize:this.pagesize,
        key: this.search.key,
        start: this.search.start,
        end: this.search.end,
      }
      let jsondata_str=JSON.stringify(jsondata)
      console.log(jsondata_str)
      axios("/apis/ScProductManage.asmx/LoadContents?index=" + 1 + "&jsondata=" + jsondata_str).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var result = JSON.parse(datas.string.__text);
        this.ListData=result;
        console.log(result)
      });
    },
    onsubmit() {
      this.LoadCount()
      this.LoadContents()
    },

    chage(e) {
      if (e) {
        this.search.start=e[0]
        this.search.end=e[1]
      } else {
        this.search.start=''
        this.search.end=''
      }
    },
    GotoPg(id,edit) { this.$router.push({path: "./AddMaterial", query: { id: id,edit:edit }});  },
   /* // 分页
    handleCurrentChange(e) {
      this.getlist(e - 1);
    },
    //列表数据
    getlist(page) {
      let arr = {
        pn: page,
        PerPageSize: 11,
        key: this.searcher.customProductName
          ? this.searcher.customProductName
          : "",
        start: this.searcher.issuanceDate[0]
          ? this.searcher.issuanceDate[0]
          : "",
        end: this.searcher.issuanceDate[1] ? this.searcher.issuanceDate[1] : ""
      };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/SalesManagement.asmx/Customermanlst?index=1&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        console.log(data3);
        var val = [];
        data3.lstall.forEach(element => {
          val.push(element);
        });
        this.tableData = val;
        for (var i = 0; i < this.tableData.length; i++) {
          this.tableData[i].xuhao = 1 + i + 11 * page;
        }
      });
    },
    //详情
    xqcustomer(componyno) {
      this.$router.push({
        path: "/CustomerManageXq",
        query: { componyno: componyno }
      });
    },
    //编辑
    bj(componyno) {
      this.$router.push({
        path: "/CustomerManageBj",
        query: { componyno: componyno }
      });
    },
    //新增
    addcutomer() {
      this.$router.push("/CustomerManageAdd");
    }*/
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.CustomerManage .search{height: 50px;border-radius: 5px;background-color: #fff;padding-left: 20px;padding-top: 10px; margin:0 20px 20px;}
.CustomerManage .demo-form-inline {display: inline-block;}
.CustomerManage .el-pagination {margin-top: 15px;text-align: center;}
.CustomerManage .ebtn {float: right;margin-right: 20px;}
/*.nav {
  background: $white;
  height: 50px;
  margin-top: 10px;
  width: 98%;
  padding: 0 1%;
  .search_box {
    width: 98%;
    padding-top: 5px;
  }
}
.customer_box1 {
  margin-top: 10px;

}
.block {
  padding-top: 10px;
  text-align: center;
}*/
</style>
